<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../res/vue.js"></script>
<script>
    Vue.component('todo-item',{
        props: ['todo'],
        template:'<li>这是个代办项目</li>'
    });
</script>
<body>
    <div id = "app">
        <p>{{ message }}</p>
    </div>
    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="app-3" >
        <p v-if="seen">现在你看到我了</p>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos"> {{todo.text}} </li>
        </ol>
    </div>
    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <ol>
        <todo-item></todo-item>
    </ol>
<script type="text/javascript">
    new Vue({
        el:"#app-3",
        data:{
            seen:true
        }
    });
     new Vue({
        el:"#app",
        data:{
            message:'hello VUE!'
        }
    });
     new Vue({
         el:"#app-4",
         data:{
             todos:[{
                 text:"学习语文"
             },{
                 text:"学习汉语"
             },{
                 text:"学习中文"
             }]
         }
     });
    var app2 = new Vue({
        el:"#app-2",
        data:{
            message:'页面加载于'+new Date()
        }
    });
    var app5 = new Vue({
        el:"#app-5",
        data:{
            message:'hello Vue.js'
        },
        methods:{
            reverseMessage:function (obj) {
               this.message  = this.message.split('').reverse().join('');
            }
        }
    });
    var app6 = new Vue({
        el:"#app-6",
        data:{
            message:'hello Vue!'
        }
    });

</script>

</body>
</html>